<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
</head>
<body>
<div class="easyui-accordion" data-options="border:false,fit:true,animate:true" id="systemMenu">
    <template v-for="menu in menuList">
        <div v-bind:title="menu.name" data-options="iconCls:'xxx'" style="padding:5px;">
            <ul class="easyui-tree">
                <template v-for="children in menu.children">
                    <li ><a href="javascript:void(0)" style="width: 500px" v-bind:onclick="'openNewTab(\''+children.id+'\',\''+children.name+'\',\''+children.url+'\')'">{{children.name}}</a></li>
                </template>
            </ul>
        </div>
    </template>
    <div title="系统管理" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">
        <ul class="easyui-tree">
            <li><a href="javascript:void(0)">菜单导航</a></li>
            <li><a href="javascript:void(0)" >用户管理</a></li>
            <li><a href="javascript:void(0)"  >角色管理</a></li>
            <li><a href="javascript:void(0)"  >数据字典</a></li>
            <li><a href="javascript:void(0)"  >系统参数</a></li>
            <li><a href="javascript:void(0)" >操作日志</a></li>
        </ul>
    </div>
    <div title="内容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">
        <ul class="easyui-tree">
            <li><a href="javascript:void(0)" >导航标题</a></li>
            <li><a href="javascript:void(0)" >导航标题</a></li>
            <li><a href="javascript:void(0)" >导航标题</a></li>
        </ul>
    </div>
    <div title="内容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">
        <ul class="easyui-tree">
            <li><a href="javascript:void(0)" >导航标题</a></li>
            <li><a href="javascript:void(0)" >导航标题</a></li>
        </ul>
    </div>
</div>
<script>
    var menuList=[];
    $.ajaxSettings.async=false;

    $.getJSON("/admin/system/menu/menuList",{},function (data) {
        menuList=data;
    });
    var systemMenu = new Vue({
        el: '#systemMenu',
        data:{menuList:menuList},
        methods: {
            openNewTab:function (id,name,url) {
                alert(id+name+url);
            }
        }
    })
    function openNewTab(id,name,url) {
        var tabPanel = $('#myTab');
        if(!tabPanel.tabs('exists',name)){
            var content = '<iframe scrolling="auto" frameborder="0" id="iframe'+id+'"  src="'+ url +'" style="width:100%;height: 700px;"></iframe>';
            tabPanel.tabs('add',{
                title:name,
                content:content,
                /*href:href,*/
                /*iconCls:iconCls,*/
                fit:true,
                cls:'pd3',
                closable:true,
                tools:[{
                    iconCls:'icon-mini-refresh',
                    handler:function(){
                        var _iframe1=window.document.getElementById('iframe'+id);
                        _iframe1.contentWindow.location.reload(true);
                    }
                }]
            });
        }
        else
        {
            tabPanel.tabs('select',name);
        }
    }
</script>


</body>
</html>